<template>
    <div>

        <el-form :inline="true" :model="search">
            <el-form-item label="菜单名称:">
                <el-input prefix-icon="el-icon-search" v-model="search.menuName" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="loadData()" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="2" :offset="0">
                <el-button type="primary" plain @click="dialogVisible = true"  icon="el-icon-plus">新增</el-button>
            </el-col>
        </el-row>


        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="code" border default-expand-all
            lazy :tree-props="{ children: 'childMenus', hasChildren: 'haveChildren' }" :load="loadChildren">
            <el-table-column prop="menuName" label="菜单名字" width="180">
            </el-table-column>

            <el-table-column prop="icon" label="图标" width="180">
            </el-table-column>

            <el-table-column label="类型">
                <template slot-scope="scope">
                    <el-tag :type="tagType[scope.row.type]">
                        {{ menuType[scope.row.type] }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="order" label="序号">
            </el-table-column>

            <el-table-column prop="permissionCode" label="权限编码">
            </el-table-column>

            <el-table-column prop="route" label="路由地址">
            </el-table-column>

            <el-table-column prop="componentRoute" label="组件地址">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="190">
                <template slot-scope="scope">
                    <el-button @click="editHandleClick(scope.row)" size="mini" plain icon="el-icon-edit">编辑</el-button>

                    <el-popconfirm style="margin-left: 10px;" title="是否确认删除？" confirmButtonText="确认"
                        cancelButtonText="取消" confirmButtonType="danger" cancelButtonType="text"
                        @confirm="deleteHandleClick(scope.row)">
                        <el-button slot="reference" size="mini" type="danger" plain icon="el-icon-delete">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="新增菜单" :visible.sync="dialogVisible" width="40%" @opened="dialogOpen" @closed="dialogClosed" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="上级菜单">
                    <el-cascader v-model="form.parentCode" :options="menuOptions" :props="{value:'code',label:'menuName',children:'childMenus',emitPath:false,checkStrictly: true}" ></el-cascader>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-radio-group v-model="form.type">
                        <el-radio-button label="0">目录</el-radio-button>
                        <el-radio-button label="1">菜单</el-radio-button>
                        <el-radio-button label="2">按钮</el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="菜单名称" size="normal">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="显示顺序" size="normal">
                            <el-input v-model="form.order"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" v-if="form.type !== '2'">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="路由地址">
                            <el-input v-model="form.route"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0" v-if="form.type != '0'">
                        <el-form-item label="组件路径">
                            <el-input v-model="form.componentRoute"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                        <el-form-item label="权限编码">
                            <el-input v-model="form.permissionCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="是否启用" size="normal">
                            <el-radio v-model="form.status" label="true">启用</el-radio>
                            <el-radio v-model="form.status" label="false">禁用</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="add">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getPageList, getChildMenu, insert, deleteMenu,getAllList,update } from "@/api/system/menu";

export default {
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            search: {
                menuName: ''
            },
            menuOptions:[],
            menuType: {
                0: "目录",
                1: "菜单",
                2: "按钮"
            },
            tagType: {
                0: "",
                1: "success",
                2: "warning"
            },
            loading: true,
            form: {
                parentCode: '',
                id: '',
                name: '',
                type: '0',
                order: 1,
                componentRoute: '',
                permissionCode: '',
                route: '',
                status: 'true'
            }
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        async loadData() {
            this.loading = true;
            let param = {
                PageNum: 1,
                PageSize: 999999,
                menuName: this.search.menuName
            }
            let result = await getPageList(param)
            if (result.code == 10000) {
                let { data } = result
                this.tableData = data.data;
            }
            this.loading = false
        },
        async loadChildren(tree, treeNode, resolve) {
            console.log(tree, treeNode);
            let result = await getChildMenu(tree.code);
            resolve(result.data)
        },
        async add() {
            let result
            if(this.form.id){
                result = await update(this.form)
            }else{
                result = await insert(this.form);
            }
            
            if (result.code == 10000) {
                this.$message({
                    message: result.data,
                    type: 'success'
                });
                this.loadData();
                this.dialogVisible = false;
            }
        },
        async editHandleClick(row) {
            this.form = {
                parentCode: row.parentMenu,
                id: row.code,
                name: row.menuName,
                type: row.type,
                order: row.order,
                componentRoute: row.componentRoute,
                permissionCode: row.permissionCode,
                route: row.route,
                status: `${row.status}`
            }
            this.dialogVisible = true;
        },
        async deleteHandleClick(row) {
            let result = await deleteMenu(row.code);
            if (result.code == 10000) {
                this.$message({
                    message: result.data,
                    type: 'success'
                });
                this.loadData();
            }

        },
        async getAllList(){
            if(sessionStorage.getItem("menuSelectList")){
                return JSON.parse(sessionStorage.getItem("menuSelectList"))
            }

            let result = await getAllList()
            if (result.code == 10000) {
                sessionStorage.setItem("menuSelectList",JSON.stringify(result.data))
                return result.data;
            }
            return [];
        },
        async dialogOpen(){
            let list = await this.getAllList()
            for (let index = 0; index < list.length; index++) {
                let element = list[index];
                this.delChildArray(element);
            }

            this.menuOptions = list;
        },

        delChildArray(menu){
            if (!menu.childMenus.length) {
                menu.childMenus = null;
                return
            }
            for (let index = 0; index < menu.childMenus.length; index++) {
                let element = menu.childMenus[index];
                this.delChildArray(element);
            }
        },
        dialogClosed(){
            this.form = {
                parentCode: '',
                id: '',
                name: '',
                type: '0',
                order: 1,
                componentRoute: '',
                permissionCode: '',
                route: '',
                status: 'true'
            }
        }
    }
};
</script>

<style scoped>

</style>